<template>
	<view>
		<view class="content">
			<u-navbar :fixed="false" :title="PageType == 'add' ? '新增投料': '编辑投料'" :autoBack="true"
				:safeAreaInsetTop="true" leftIconColor="#fff"></u-navbar>

			<uni-forms ref="baseForm" :modelValue="formData" label-position="left" class="FormDataBox"
				label-width="90px">

				<uni-forms-item name="BillDate" label="单据日期">
					<uni-easyinput type="text" :readonly="true" v-model="formData.BillDate" :styles="{color: '#999'}"
						trim="all" :clearable="false"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="BillNO" label="单据编号">
					<uni-easyinput type="text" :readonly="true" v-model="formData.BillNO" :styles="{color: '#999'}"
						trim="all" :clearable="false"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="WoOrderBillNO" label="来源工单">
					<uni-easyinput type="text" :readonly="true" v-model="formData.WoOrderBillNO"
						:styles="{color: '#999'}" trim="all" :clearable="false"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="JobOrderBillNO" label="派工单号">
					<uni-easyinput type="text" :readonly="true" v-model="formData.JobOrderBillNO"
						:styles="{color: '#999'}" trim="all" :clearable="false"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="ProductName" label="品名">
					<uni-easyinput type="text" :readonly="true" v-model="formData.ProductName" :styles="{color: '#999'}"
						trim="all" :clearable="false"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="ProductSpec" label="规格">
					<uni-easyinput type="text" :readonly="true" v-model="formData.ProductSpec" :styles="{color: '#999'}"
						trim="all" :clearable="false"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>

			<view class="x-bc" style="padding: 0 10rpx 0 0;">
				<view
					style="background-color: #74a6e7;color: #fff;font-size: 12px;height: 30px;line-height: 30px;padding: 0 10rpx;">
					<text>生产投料明细</text>
				</view>

				<!-- <view>
					<button class="content_bottom_primary_Btn" style="min-width: 90px;font-size: 12px;">批量删除</button>
				</view> -->
			</view>

			<view class="content_main" style="padding: 10rpx;">
				<view class="content_main_CardBox" style="margin-bottom: 10rpx;" v-for="(item,index) in ChildDataList">
					<view class="x-bc">
						<view class="x-f">
							<checkbox v-if="PageType == 'add'" @click="CheckBtn(item,index)" class="CheckBox"
								:checked="item.checked" color="#fff" activeBackgroundColor="#51d0d0"
								activeBorderColor="#51d0d0">
							</checkbox>
							<view class="content_main_CardBox_ordinal" style="margin-left: 8rpx;">
								{{index + 1}}
							</view>
						</view>


						<!-- <view class="x-c" style="width: fit-content;min-width: 36rpx;height: 36rpx;">
							<u-icon name="trash" color="#cc0000" size="36rpx"></u-icon>
						</view> -->
					</view>

					<m-field label="工序" labelFontSize="14px" labelWidth="60px" paddings="8rpx 0" :borderBottom="true"
						borderColor="#f4f4f4">
						<template #custom-value>
							<uni-easyinput type="text" v-model="item.ProcedureName" :readonly="true"
								:inputBorder="false" trim="all" :clearable="false"></uni-easyinput>
						</template>
					</m-field>

					<m-field label="车间" labelFontSize="14px" labelWidth="60px" paddings="8rpx 0" :borderBottom="true"
						borderColor="#f4f4f4">
						<template #custom-value>
							<uni-easyinput type="text" v-model="item.FWorkshopName" :readonly="true"
								:inputBorder="false" trim="all" :clearable="false"></uni-easyinput>
						</template>
					</m-field>

					<m-field label="投料人" labelFontSize="14px" labelWidth="60px" paddings="8rpx 0" :borderBottom="true"
						borderColor="#f4f4f4">
						<template #custom-value>
							<view @click="openBaseScreen('投料人','radio',index)">
								<uni-easyinput type="text" v-model="item.EmplName" :readonly="true" :inputBorder="false"
									trim="all" :clearable="false" placeholder="请选择投料人"
									suffixIcon="right"></uni-easyinput>
							</view>
						</template>
					</m-field>

					<m-field label="操作时间" labelFontSize="14px" labelWidth="60px" paddings="8rpx 0" :borderBottom="true"
						borderColor="#f4f4f4">
						<template #custom-value>
							<view @click="ChangeDate(item,index)">
								<uni-easyinput type="text" v-model="item.OperatingTime" :readonly="true"
									:inputBorder="false" trim="all" :clearable="false" placeholder="请选择操作时间"
									suffixIcon="right"></uni-easyinput>
							</view>
						</template>
					</m-field>

					<m-field label="备注" labelFontSize="14px" labelWidth="60px" paddings="8rpx 0" :borderBottom="true"
						borderColor="#f4f4f4">
						<template #custom-value>
							<uni-easyinput type="text" v-model="item.FRemarks" :readonly="PageType == 'edit'"
								:inputBorder="false" trim="all" :clearable="false"
								:placeholder="PageType == 'edit' ? '' : '请输入备注'"></uni-easyinput>
						</template>
					</m-field>


				</view>
			</view>


			<view class="BottomBox" v-if="PageType == 'add'" :style="$utils.disposeSafeBottomFun()">
				<button class="content_bottom_primary_Btn CommonBtnSize" @click="submitBtn"
					style="width: 20%;margin-left: 10px !important;min-width: 160rpx;font-size: 24rpx;">提交</button>
			</view>

			<!-- 悬浮按钮_扫码 -->
			<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true" :initialBottom="80"
				@btnClick="ToScanBtn">
				<template #BtnContent>
					<u-icon name="scan" color="#fff" size="54rpx"></u-icon>
				</template>
			</m-drag-button>


		</view>

		<!-- 时间选择器 -->
		<lingfeng-timepicker ref="timePop" type="datetime-all" :defaultData="defaultData" :minDate="minDate"
			:maxDate="maxDate" @change="timeChange"></lingfeng-timepicker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultData: {
					startTime: ''
				},
				minDate: {
					year: 1970,
					month: 1,
					date: 1
				},
				maxDate: {
					year: 2099,
					month: 12,
					date: 31
				},

				showTimePicker: false,
				DatetimeData: Number(new Date()),
				PageType: 'add',
				BtnShow: false,
				formData: {
					BillDate: '',
					BillNO: '',
					ProductID: '',
					ProductCode: '',
					ProductName: '',
					ProductSpec: '',
					WoOrderID: '',
					WoOrderBillNO: '',
					JobOrderID: '',
					JobOrderBillNO: ''
				},
				ChildDataList: [],
				ChoiceIndex: null,
			};
		},
		onLoad(option) {
			let that = this;

			// 判断是否为空，空 - 新增 ； 反之回显
			if (this.$utils.isEmpty(option)) {
				that.PageType = 'add'
			} else {
				that.PageType = 'edit'

				that.GetPageInfoByID(option.ProductionFeedID)
			}

		},
		mounted() {
			let that = this;

			that.$nextTick(() => {
				that.BtnShow = true;
			})

			uni.$on('FeedAction_Choice', function(ret) {
				if (ret.type == '投料人') {
					that.ChildDataList[that.ChoiceIndex] = Object.assign(that.ChildDataList[that.ChoiceIndex], ret
						.data);
					that.ChoiceIndex = null;
					that.$forceUpdate();
				}
			})
		},
		onUnload() { // 监听页面卸载,
			// 关闭监听器
			uni.$off('FeedAction_Choice');
		},
		methods: {
			timeChange(val) { // 点击确认
				let that = this;
				that.ChildDataList[that.ChoiceIndex]['OperatingTime'] = val;
				that.ChoiceIndex = null;
			},
			ChangeDate(data, index) {
				let that = this;
				that.ChoiceIndex = index;

				that.defaultData.startTime = that.Request.dateFormat(data.OperatingTime, 'Y-MM-dd hh:mm:ss')

				this.$refs.timePop.show();
			},
			openBaseScreen(str, type, index) { // 前往筛选页
				let that = this;

				if (type == 'radio') {
					let obj = null;
					let url = '/commonPage/Tool/baseScreen';

					if (str == '投料人') {
						// 记录是第几个子表数据的索引
						that.ChoiceIndex = index;
						obj = {
							allowClear: false,
							cmd: 'XGD_Employee',
							type: str,
							ListeningName: 'FeedAction_Choice',
							// multiple: false,
							serverSearch: {
								isPaging: true, //是否分页
								searchKey: 'EmplCode', //搜索关键词，应包含在param中
								showText: 'EmplName', //查询结果显示的字段
								pageIndexStr: 'Pageindex', //分页页码字段，应包含在param中
								// subText: [{
								// 	label: '描述',
								// 	labelKey: 'desc'
								// }],
								ChoiceDataKey: 'EmplID',
								ChoiceDataData: this.formData.EmplID,
							},
							IsAllowAddEdit: '作业员', // 是否允许新增编辑
							param: {
								EmplCode: '',
								Pageindex: 1,
								PageSize: 30
							}
						}


					}

					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: obj
					})

					uni.navigateTo({
						url: url
					})

				}

			},
			CheckBtn(data) {
				data.checked = !data.checked;

			},
			submitBtn() { // 新增提交按钮
				let that = this;

				let filterData = this.ChildDataList.filter(item => {
					return item.checked
				})

				if (filterData.length == 0) {
					return this.$utils.msg('请勾选的表单内容', 2000)
				}

				let hasEmpty = filterData.some(item => {
					return that.$utils.isEmpty(item.EmplName) || that.$utils.isEmpty(item.OperatingTime)
				})

				if (hasEmpty) {
					return this.$utils.msg('请完善勾选的表单内容', 3000)
				}

				this.$utils.showLoading()

				let FlowOrder = [],
					OperatingTime = [],
					ProcedureID = [],
					FWorkshopID = [],
					EmplID = [],
					JobPROCID = [],
					FRemarks = [];

				filterData.forEach(item => {
					FlowOrder.push(item.FlowOrder)
					OperatingTime.push(item.OperatingTime)
					ProcedureID.push(item.ProcedureID)
					FWorkshopID.push(item.FWorkshopID)
					EmplID.push(item.EmplID)
					JobPROCID.push(item.JobPROCID)
					FRemarks.push(item.FRemarks)
				})

				let obj = {
					FlowOrder: FlowOrder.join(','),
					OperatingTime: OperatingTime.join(','),
					ProcedureID: ProcedureID.join(','),
					FWorkshopID: FWorkshopID.join(','),
					EmplID: EmplID.join(','),
					JobPROCID: JobPROCID.join(','),
					FRemarks: FRemarks.join(','),

					WoOrderID: this.formData.WoOrderID,
					ProductID: this.formData.ProductID,
					ProductName: this.formData.ProductName,
					ProductSpec: this.formData.ProductSpec,
					JobOrderID: this.formData.JobOrderID,
					GDWoOrderID: this.formData.WoOrderID,
				};

				// console.log(obj)
				try {

					that.Request.request('XGD_ADD_SCTL', obj, (ret) => {
						if (ret.status == 200) {
							that.$utils.hideLoading()
							uni.showToast({
								title: '提交成功'
							});

							// that.PageType = 'edit';

							// that.GetPageInfoByID(ret.data.ds[0]['ProductionFeedID'])

							uni.$emit('FeedRefresh')

							uni.navigateBack();
						}
					}, (err) => {
						that.$utils.hideLoading()
						that.$utils.msg('提交失败，请重试')

					})
				} catch (e) {
					//TODO handle the exception
					that.$utils.hideLoading()
					that.$utils.msg('请求失败，请重试')
				}

			},
			GetPageInfoByID(data) {
				let that = this;

				that.Request.request('XGD_SCTLMX', {
					ProductionFeedID: data
				}, (ret) => {
					// console.log(ret)
					that.formData = ret.data.ds[0];
					that.formData = Object.assign(that.formData, ret.data.ds[0]);


					that.ChildDataList = ret.data.ds1;
				})
			},
			ToScanBtn() { // 点击扫码
				let that = this;
				this.$scanPopup.openScan({
					success: (res) => {
						that.getScanPageInfo(res.result)
					}
				})
				/* uni.scanCode({
					success: function(res) {
						// console.log(res.result)

						that.getScanPageInfo(res.result)
					}
				}); */
			},
			getScanPageInfo(data) { // 扫码获取数据
				let that = this;

				that.Request.request('Get_JobOrder', {
					QrCode: data
				}, (ret) => {
					// console.log(ret)
					that.formData = ret.data.ds1[0];
					that.formData = Object.assign(that.formData, ret.data.ds1[0]);


					that.ChildDataList = ret.data.ds2.map(item => {
						return {
							...item,
							checked: false
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f9f9f9;

		uni-button {
			margin-left: initial !important;
			margin-right: initial !important;
		}
	}

	// 表单内容
	.FormDataBox {
		// width: 90%;
		// margin: 0 auto;
		margin-bottom: 10rpx;

		.disabled {
			.uni-forms-item__label {
				color: #b5b5b5 !important;
			}
		}

		.uni-forms-item {
			padding: 0 16rpx;
			background-color: #fff;
			// margin-top: 20rpx;
			margin-bottom: 0 !important;
		}

		// 输入框上层类名
		.uni-easyinput__content {
			background-color: transparent !important;
			border: none !important;
			// border-bottom: 1px solid #c6c6c6 !important;
		}

		.uni-easyinput__content-input {
			padding-left: 30rpx !important;
		}
	}

	.BottomBox {
		height: 70px;
		line-height: 70px;
		padding: 6px 15px;
		border-top: 1px solid #efefef;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: #fff;
	}
</style>